/**
 * 依赖jquery nicescroll echarts tool.js
 */

//自定义滚动条，nicescroll
$(function () {
    // if (!!window.ActiveXObject || "ActiveXObject" in window) { //ie浏览器
    // if (!(navigator.userAgent.indexOf("Chrome") > -1 && navigator.userAgent.indexOf("Safari") > -1) || navigator.userAgent.indexOf("Edge") > -1) { //不是谷歌浏览器或者是edge浏览器
    $(document).on("mouseenter", ".u-scrollY", function () {
        var $this = $(this);
        if ($this.getNiceScroll() && $this.getNiceScroll().length) return;
        $this.niceScroll({ //自定义滚动条
            cursorcolor: "rgba(0,0,0,0.6)", // 改变滚动条颜色
            cursorborder: "none", // CSS方式定义滚动条边框
            // background:"rgba(255,255,255,0.9)",// 轨道的背景颜色
            // cursoropacitymin: 0, // 当滚动条是隐藏状态时改变透明度, 值范围 1 到 0
            // cursoropacitymax: 1, // 当滚动条是显示状态时改变透明度, 值范围 1 到 0
            // cursorwidth: "5px", // 滚动条的宽度，单位：便素
            // cursorborderradius: "5px", // 滚动条圆角（像素）
            autohidemode: "hidden", // 隐藏滚动条的方式:默认值true_无滚动时隐藏;false_不隐藏;"leave"_仅在指针离开内容时隐藏;"hidden"_一直隐藏;"scroll"_仅在滚动时显示
        });
    })
    // }
});

//适应全屏
$(function () {
    // console.log(window.screen.width);
    //缩放html，适应全屏
    // if (window.screen.width < 1920) { //屏幕小于1920时

    // resizeHtmlFull(true); //适应全屏

    //自定义按键全屏
    $(document).on('keydown', function (e) {
        var e = event || window.event || arguments.callee.caller.arguments[0];
        if (e && e.keyCode == 121) {//捕捉F10键盘动作
            e.preventDefault();  //阻止默认动作
            var el = document.documentElement;
            var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen;//定义不同浏览器的全屏API
            //执行全屏
            if (typeof rfs != "undefined" && rfs) {
                rfs.call(el);
            } else if (typeof window.ActiveXObject != "undefined") {
                var wscript = new ActiveXObject("WScript.Shell");
                if (wscript != null) {
                    wscript.SendKeys("{F11}");
                }
            }
            //监听不同浏览器的全屏事件，并件执行相应的代码
            document.addEventListener("webkitfullscreenchange", function () {//
                if (document.webkitIsFullScreen) {
                    //全屏后要执行的代码
                    resizeHtmlFull(true);
                } else {
                    //退出全屏后执行的代码
                    resizeHtmlFull(false);
                }
            }, false);

            document.addEventListener("fullscreenchange", function () {
                if (document.fullscreen) {
                    resizeHtmlFull(true);
                } else {
                    //退出全屏后执行的代码
                    resizeHtmlFull(false);
                }
            }, false);

            document.addEventListener("mozfullscreenchange", function () {
                if (document.mozFullScreen) {
                    resizeHtmlFull(true);
                } else {
                    //退出全屏后执行的代码
                    resizeHtmlFull(false);
                }
            }, false);

            document.addEventListener("msfullscreenchange", function () {
                if (document.msFullscreenElement) {
                    //全屏后要执行的代码
                    resizeHtmlFull(true);
                } else {
                    //退出全屏后执行的代码
                    resizeHtmlFull(false);
                }
            }, false)
        }
    });

    // }

    function resizeHtmlFull(t) {
        if (t) {
            var docW = document.documentElement.clientWidth;//可见区域宽度
            var bodyW = document.body.clientWidth;
            // console.log(docW, bodyW);
            $("html").css({
                "transform-origin": "left center",
                "transform": "scale(" + docW / bodyW + ")",
                "overflow": "hidden"
            });
        } else {
            $("html").css({
                "transform-origin": "left center",
                "transform": "scale(1)",
                "overflow": "auto"
            });
        }
    }
});

//时间
$(function () {
    dateTime();
    setInterval(dateTime, 1000);

    function dateTime() {
        var time = new Date().format("yyyy 年 MM 月 dd 日 w hh:mm:ss");
        document.getElementById("dateTime").innerHTML = time;
    }
});

//绘制24小时出入统计双柱状图 echarts
function drawBar(domId, title, data1, data2) {
    var option = {
        color: ['#37D3FB', '#EAF270'],
        title: {
            text: title,
            textStyle: {
                fontSize: 16,
                color: '#ffffff'
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
                shadowStyle: {
                    color: 'rgba(255, 255, 255, 0.1)',
                    shadowColor: 'rgba(255, 255, 255, 0.5)',
                    shadowBlur: 5
                }
            }
        },
        legend: {
            type: 'scroll',
            // orient: 'vertical',
            left: 'right',
            top: 'top',
            // width: '68%',
            itemGap: 20,
            textStyle: {
                color: '#fff',
                fontSize: 12
            },
            // inactiveColor: '#666', //图例关闭时的颜色
            pageIconColor: '#fff',
            pageIconSize: 10,
            pageTextStyle: {color: '#fff', fontSize: 10},
            data: ['入', '出']
        },
        grid: {
            top: '38px',
            left: '12px',
            right: '0px',
            bottom: '10px',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: true,
                axisLine: {
                    show: true,
                    lineStyle: {       // 属性lineStyle控制线条样式
                        color: '#fff',
                        shadowColor: '#fff', //默认透明
                        shadowBlur: 10
                    }
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    // interval: 0, //文字全显示
                    // rotate: 22, //防止文字重叠，倾斜角度
                    textStyle: {
                        color: '#fff',
                        fontSize: 12
                    }
                },
                data: ['0:00', '2:00', '4:00', '6:00', '8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00']
            }
        ],
        yAxis: [
            {

                type: 'value',
                // name: '人（次）',
                splitLine: {
                    show: true,
                    lineStyle: {       // 属性lineStyle控制线条样式
                        color: '#3D5C8C'
                    }
                },
                axisLine: {
                    show: false,
                    lineStyle: {       // 属性lineStyle控制线条样式
                        color: '#fff',
                        shadowColor: '#fff', //默认透明
                        shadowBlur: 10
                    }
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    textStyle: {
                        color: '#fff'
                    }
                }
            }
        ],
        series: [
            {
                name: '入',
                type: 'bar',
                barGap: 0,
                barWidth: 5,
                itemStyle: { //图形样式
                    normal: {
                        barBorderRadius: 4
                    }
                },
                // label: { //图形文字
                //     normal: {
                //         show: true,
                //         position: 'top',
                //         textStyle: {
                //             // color: '#fff',
                //             fontSize: 8
                //         }
                //     }
                // },
                data: data1
            },
            {
                name: '出',
                type: 'bar',
                barGap: 0,
                barWidth: 5,
                itemStyle: { //图形样式
                    normal: {
                        barBorderRadius: 4
                    }
                },
                // label: { //图形文字
                //     normal: {
                //         show: true,
                //         position: 'top',
                //         textStyle: {
                //             // color: '#fff',
                //             fontSize: 8
                //         }
                //     }
                // },
                data: data2
            }
        ]
    };
    eChart_draw(domId, option)
}

//绘制仪表盘 echarts
function drawGauge(domId, title, value, r) {
    // var color = [
    //     [0.3, '#C23531'], [0.7, '#63869e'], [1, '#91c7a1']
    // ];
    // var color = [
    //     [0.05, '#cf3'], [0.10, '#9f3'], [0.15, '#6f3'], [0.20, '#3f3'], [0.25, '#3f6'], [0.30, '#3f9'], [0.35, '#3fc'], [0.40, '#3ff'], [0.45, '#3cf'], [0.50, '#39f'], [0.55, '#36f'], [0.60, '#33f'], [0.65, '#63f'], [0.70, '#93f'], [0.75, '#c3f'], [0.80, '#f3f'], [0.85, '#f3c'], [0.90, '#f39'], [0.95, '#f36'], [1, '#f33']
    // ];
    var color = [
        [0.10, 'lime'], [0.60, '#1e90ff'], [0.90, '#FFAA00'], [1, '#ff4500']
    ];

    if (r) {
        color = [
            [0.10, '#ff4500'], [0.40, '#FFAA00'], [0.90, '#1e90ff'], [1, 'lime']
        ];
    }

    var option = {
        title: {
            text: title,
            textStyle: {
                fontSize: 16,
                color: '#ffffff'
            }
        },
        // axisLabel: {
        //     show: false,
        //     formatter: function (v) {
        //         return '';
        //         switch (v) {
        //             case 0:
        //                 return v;
        //             case 100:
        //                 return v;
        //         }
        //     }
        // },
        tooltip: {
            formatter: "{c}%"
        },
        series: [{
            // name: '彩虹仪表盘',
            type: "gauge",
            startAngle: 180,
            endAngle: 0,
            min: 0,
            max: 100,
            radius: "120%",
            center: ["50%", "88%"],
            axisLine: {
                show: true,
                lineStyle: {
                    width: 15,
                    shadowColor: '#fff', //默认透明
                    shadowBlur: 5,
                    color: color
                }
            },
            axisLabel: {
                show: false,
                textStyle: {
                    fontSize: 6
                }
            },
            axisTick: {
                show: true, //小刻度
                length: 3
            },
            splitLine: {
                show: true,
                length: 6
            },
            pointer: {
                show: true,
                width: "8%",
                length: '80%'
            },
            detail: {
                formatter: '{value}%',
                offsetCenter: ['0', '-30%'],
                textStyle: {
                    fontSize: 24,
                    fontStyle: 'italic',
                    fontWeight: 'bolder',
                    color: '#fff',
                    shadowColor: '#000',
                    shadowBlur: 10
                }
            },
            data: [{value: value}]
        }]
    };
    eChart_draw(domId, option);
}

//绘制百分比图 echarts
function drawPie(domId, value, color) {
    var title = $("#" + domId).attr("data-title");
    if (value > 100) {
        console.log("#########drawPie数值错误，百分比值为1~100");
        return;
    }
    if (!color) {
        color = "#5BF1FD";
    }
    // console.log($("#" + domId + "+.boxStatus .number").length)
    $("#" + domId + "+.boxStatus .point").css("--pointColor", color);
    $("#" + domId + "+.boxStatus .number").css("color", color);
    var option = {
        title: {
            text: title,
            textStyle: {
                fontSize: 16,
                color: '#ffffff'
            }
        },
        series: [{
            color: [color, "#DCDCDC"],
            name: '访问来源',
            type: 'pie',
            radius: ['52%', '58%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: true,
                    position: 'center'
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: [{
                value: value,
                name: value + '%',
                label: {
                    normal: {
                        textStyle: {
                            fontSize: '18',
                            color: "#fff",
                            // fontWeight: 'bold'
                        },
                        padding: [-12, 0, 0, 0]
                    }
                }
            },
                {
                    value: 100 - value,
                    name: '在线率',
                    label: {
                        normal: {
                            textStyle: {
                                fontSize: '12',
                                color: '#fff',
                                // fontWeight: 'bold'
                            },
                            padding: [38, 0, 0, 0]
                        }
                    }
                }
            ]
        }]
    };
    eChart_draw(domId, option);
}

$(function () {
    //点击切换tap
    $(".tapBtn").click(function (e) {
        var $this = $(this);
        if ($this.hasClass("active")) return;
        $(".tapBtn").removeClass("active");
        $this.addClass("active");
        var $tapCons = $(".tapCon");
        $tapCons.removeClass("active");
        $($tapCons[$this.index()]).addClass("active");
        // switch ($this.index()) {
        //     case 0:
        //         $("#mapDiv").addClass("active");
        //         break;
        //     case 1:
        //         $("#picDiv").addClass("active");
        //         break;
        // }
    });
});
